<template>
	<div>
		<div class="page-container">
            
			<el-form :model="dataForm" label-width="200px" :rules="dataFormRules" ref="dataForm" :size="size"
				label-position="right">
                <span style="padding-left:10%; font-weight:bold">扣款规则设置</span>
				<el-form-item label="取消订单扣除手续费:" prop="name">
					<el-input v-model="dataForm.configValue" @input="handleInput2(dataForm.value)" auto-complete="off"></el-input>%
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" type="primary" @click="submitForm()" :loading="editLoading">确定</el-button>
			</div>
  		</div>
	</div>
  


</template>
<script>
import KtButton from "@/views/Core/KtButton"
export default {
	data() {
		return {
            // 新增编辑界面数据
			dataForm: {
				id: null,
				title:'取消订单扣除手续费',
				configKey:'ServiceCharge',
				configValue:'',
			},
			size: 'small',
			editLoading: false,
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {"pageNum":1,"pageSize":10,"totalSize":0,"totalPages":0,"content":[]},
			dataFormRules: {
				value: [
					{ required: true, message: '请输入手续费', trigger: 'blur' }
				]
			},
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			var me = this;
			if(data !== null && data !== undefined) {
				me.pageRequest = data
			}
			console.log(me.pageRequest);
			let req = {
				"curPage":me.pageRequest.pageNum,
				"limit":me.pageRequest.pageSize,
				"key":'ServiceCharge'
			}
			debugger;
			this.$api.appconfig.findBasePage(req).then((res) => {
				debugger;
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					me.pageResult.content = res.page.list;
					me.dataForm = res.page.list[0];
				}
			}).then(data!=null?data.callback:'')
		},
		// 新增修改
		submitForm: function () {
			var me = this;
			this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						debugger;
						//修改
						if(me.dataForm.id != null){
							let params = Object.assign({}, me.dataForm)
							console.log(params);
							this.$api.appconfig.updatebaseconfig(params).then((res) => {
								if(res.code == 200) {
									this.$message({ message: '操作成功', type: 'success' })
									this.dialogVisible = false
								} else {
									this.$message({message: '操作失败, ' + res.msg, type: 'error'})
								}
								this.findPage(null)
							})
						}else{
							//新增	
							console.log(me.dataForm);				
							this.$api.appconfig.savebaseconfig(me.dataForm).then((res) => {
								if(res.code == 200) {
									this.$message({ message: '操作成功', type: 'success' })
									this.dialogVisible = false
								} else {
									this.$message({message: '操作失败, ' + res.msg, type: 'error'})
								}
								this.findPage(null)
							})
						}
						
					})
				}
			})
		},
		handleInput2(withdrawAmount) {
            var re = /^[0-9]+.?[0-9]*/;
			if(!re.test(withdrawAmount)){
					this.$message({message: '请输入正确的数字, ' + res.msg, type: 'error'})
					return
			}
			//限制小数点后2位数
			var index = String(withdrawAmount).indexOf('.');
			if (index != -1) {
				var arrStr = [];
				arrStr = String(withdrawAmount).split('.');
				if (arrStr[1] && arrStr[1].length > 2) {
					this.dataForm.value = String(withdrawAmount).substring(0, index + 3);
					return;
				}else{
					this.dataForm.value = withdrawAmount;
				}
			} else {
				this.dataForm.value = withdrawAmount;
			}
        },
    
	},
    mounted() {
		this.findPage()
	}
}
</script>

<style lang="scss" scoped>
    .page-container{
        width:40%;
        min-width:600px;
        margin:100px auto;
    }
	.page-editor{
		width:40%;
        min-width:600px;
		height:600px;
        margin:10px auto;
	}
    .el-button{
        width:150px;
        border-redius:5px;
        margin-left:40%;
    }
    .el-input {
        width: 300px;
        height: 32px;
        line-height: 32px;
    }
</style>